<template>
        <view class="notice">
                <view class="left">
                        <uni-icons type="sound-filled"></uni-icons>
                        <text class="title">公告</text>
                </view>
                <view class="center">
                        <swiper autoplay circular vertical interval="3000" duration="300">
                                <swiper-item v-for="item in noticeList">
                                        <navigator url="/pages/notice/notice">
                                                <text>{{ item.title }}</text>
                                        </navigator>
                                </swiper-item>
                        </swiper>
                </view>
                <view class="right">
                        <uni-icons type="right" size="16" color="#333"></uni-icons>
                </view>
        </view>
</template>

<style lang="scss" scoped>
        .notice {
                width: 700rpx;
                height: 80rpx;
                display: flex;
                justify-content: space-between;
                padding: 0 20rpx;
                margin: 0 auto;
                line-height: 80rpx;
                background-color: #f3f3f3;
                border-radius: 40rpx;

                // 公告栏左边
                .left {
                        width: 140rpx;
                        display: flex;
                        align-items: center;

                        .title {
                                margin-left: 5rpx;
                                color: #333333;
                                font-size: 30rpx;
                                font-weight: 600;
                        }
                }

                // 公告栏中间
                .center {
                        flex: 1;

                        swiper {
                                height: 100%;

                                swiper-item {
                                        font-size: 30rpx;
                                        color: #666666;
                                        overflow: hidden;
                                        // 文本不换行
                                        white-space: nowrap;
                                        // 超长公告显示省略号
                                        text-overflow: ellipsis;
                                }
                        }
                }

                // 公告栏右边
                .right {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                }
        }
</style>

<script setup>
        import {
                onMounted,
                ref
        } from 'vue';
        import {
                request
        } from '../../untils/request';

        const noticeList = ref([]);

        const getNotice = async () => {
                let result = await request({
                        url: '/wallpaper/notice'
                })
                noticeList.value = result.data;
                console.log(noticeList.value);
        }

        onMounted(() => {
                getNotice();
        })
</script>